<template>
    <div class="product-form">
        <h3>查看产品档案</h3>
        <el-form :model="formData">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="产品编码">
                        {{ formData.productCode }}
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-form-item label="产品名称">
                        {{ formData.cp_name }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="产品品牌">
                        {{ formData.pp_name }}
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-form-item label="产品分类">
                        {{ getProductCategoryName(formData.cp_fl) }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="产品型号">
                        {{ formData.cp_xh }}
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-form-item label="产品单位">
                        {{ getUnitName(formData.dw_code) }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="BOM">
                        {{ formData.bom_code }}
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-form-item label="产品类型">
                        {{ getProductTypeName(formData.cp_lx) }}
                    </el-form-item>
                </el-col>
            </el-row>

            <h3>产品属性</h3>
            <el-table :data="attributes" border>
                <el-table-column label="序号" width="80">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="sx_name" label="属性名称"></el-table-column>
                <el-table-column prop="sx_zhi" label="属性值"></el-table-column>
            </el-table>
            <h3>产品文档</h3>
            <el-table :data="documents" border>
                <el-table-column label="序号" width="80">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="cpwd_name" label="文档名称"></el-table-column>
                <el-table-column prop="cpwd_lb" label="文档链接"></el-table-column>
            </el-table>

            <h3>产品图片</h3>
            <el-table :data="images" border>
                <el-table-column label="序号" width="80">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="cptp_name" label="图片名称"></el-table-column>
                <el-table-column prop="cptp_zhi" label="图片链接"></el-table-column>
            </el-table>

            <el-row justify="end" style="margin-top: 20px;">
                <el-button @click="cancel">取 消</el-button>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

export default {
    setup() {
        const formData = ref({
            productCode: '',
            cp_name: '',
            pp_name: '',
            cp_fl: '',
            cp_xh: '',
            dw_code: '',
            bom_code: '',
            cp_lx: ''
        });

        const router = useRouter();
        const route = useRoute();

        onMounted(() => {
            formData.value.productCode = route.query.productId;
            fetchData();
        });

        const cancel = () => {
            router.push('/Product');
        };

        const documents = ref([]);
        const images = ref([]);
        const attributes = ref([]);
        const dwOptions = ref([]);
        const cpfl = ref([]);
        const cplx = ref([]);


        // 集中管理 API URL
        const API_URLS = {
            product: `/api/BD_CP/GetBD_CPcp_code`,
            attributes: '/api/BD_CPSX/Getcpsxname',
            images: '/api/BD_CPTP/Getcptpe',
            documents: '/api/BD_CPWD/Getcpwd',
            category: '/api/Dict/GetOneDict?id=7',
            type: '/api/Dict/GetOneDict?id=9',
            units: '/api/DW/GetOneDW'
        };

        const fetchData = async () => {
            const cpCode = formData.value.productCode;
            try {
                // 定义请求参数和 URL 的映射
                const requests = [
                    { url: API_URLS.product, params: { cp_code: cpCode } },
                    { url: API_URLS.attributes, params: { code: cpCode } },
                    { url: API_URLS.images, params: { code: cpCode } },
                    { url: API_URLS.documents, params: { code: cpCode } },
                    { url: API_URLS.category },
                    { url: API_URLS.type },
                    { url: API_URLS.units }
                ];

                // 并行发起请求
                const responses = await Promise.all(
                    requests.map(({ url, params }) => axios.get(url, { params }))
                );

                // 解构赋值获取响应数据
                const [
                    productRes,
                    attrRes,
                    imgRes,
                    docRes,
                    categoryRes,
                    typeRes,
                    unitRes
                ] = responses;

                // 更新数据
                documents.value = docRes.data;
                images.value = imgRes.data;
                attributes.value = attrRes.data;
                cpfl.value = categoryRes.data;
                cplx.value = typeRes.data;
                dwOptions.value = unitRes.data;

                if (productRes.data) {
                    formData.value = { ...formData.value, ...productRes.data };
                }
            } catch (error) {
                console.error('Error fetching tableData:', error);
                ElMessage.error('数据获取失败');
            }
        };

        const getProductCategoryName = (id) => {
            const category = cpfl.value.find(item => item.dictionary_id === id);
            return category ? category.dictionary_name : '';
        };

        const getUnitName = (code) => {
            const unit = dwOptions.value.find(item => item.dw_code === code);
            return unit ? unit.dw_name : '';
        };

        const getProductTypeName = (id) => {
            const type = cplx.value.find(item => item.dictionary_id === id);
            return type ? type.dictionary_name : '';
        };

        return {
            formData,
            cancel,
            cpfl,
            cplx,
            dwOptions,
            attributes,
            images,
            documents,
            getProductCategoryName,
            getUnitName,
            getProductTypeName
        };
    },
};
</script>

<style scoped>
.product-form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.el-form {
    flex: 1;
    overflow-y: auto;
}
</style>